<%--
  Created by IntelliJ IDEA.
  User: xiaomi
  Date: 2025/1/31
  Time: 15:24
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>课程列表</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        table {
            border-collapse: collapse;
            width: 100%;
        }
        table, th, td {
            border: 1px solid rgb(165, 184, 213);
        }
        th, td {
            text-align: center;
            padding: 8px;
        }
        th {
            background: rgb(165, 184, 213);
            color: white;
        }
        button {
            padding: 5px 10px;
            margin: 5px;
            border: none;
            border-radius: 3px;
            background-color: rgb(165, 184, 213);
            color: white;
            cursor: pointer;
        }
        button:hover {
            background-color: rgb(125, 166, 217);
        }
        .pagination {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin-top: 20px;
        }
        .pagination button {
            padding: 5px 10px;
        }
        .pagination span {
            padding: 5px 10px;
            background-color: #f0f0f0;
        }
    </style>
</head>
<body>
<table id="courseTable">
    <tr>
        <th>课程图片</th>
        <th>名称</th>
        <th>教师</th>
        <th>类型</th>
        <th>价格</th>
        <th>人数</th>
        <th>上课时间</th>
        <th>审核状态</th>
    </tr>
</table>
<div class="pagination">
    <button id="firstPage">首页</button>
    <button id="prevPage">上一页</button>
    <span id="pageInfo"></span>
    <button id="nextPage">下一页</button>
    <button id="lastPage">末页</button>
</div>
<script>
    $(document).ready(function () {
        let current = 1;
        const pageSize = 6; // 每页显示的记录数
        let totalPages = 1;
        function fetchCourses(page) {
            current = page;
            const url = './teacher/list1/'+page+'/'+pageSize;
            $.ajax({
                url: url,
                type: 'POST',
                dataType: 'json',
                success: function (response) {
                    const data = response.data.list;
                    const total = response.data.total;
                    totalPages = Math.ceil(total / pageSize);
                    renderTable(data);
                    updatePagination(totalPages, page);
                },
                error: function () {
                    alert('获取课程信息失败');
                }
            });
        }

        function renderTable(data) {
            const table = $('#courseTable');
            table.find('tr:gt(0)').remove(); // 清空表格内容（保留表头）
            data.forEach(function (course) {
                const row = $('<tr></tr>');
                const imgCell = $('<td></td>');
                const img = $('<img>', {
                    src: course.picture,
                    alt: '课程图片',
                    width: '100'
                });
                imgCell.append(img);
                row.append(imgCell);

                row.append($('<td></td>').text(course.classname));
                row.append($('<td></td>').text(course.classteacher));
                row.append($('<td></td>').text(course.classtype));
                row.append($('<td></td>').text(course.money));
                row.append($('<td></td>').text(course.number));
                row.append($('<td></td>').text(course.time));

                const stateCell = $('<td></td>');
                const stateText = $('<span></span>');
                if (course.state == 0) {
                    stateText.text("待审核");
                } else if (course.state == 1) {
                    stateText.text("已通过");
                } else if (course.state == 2) {
                    stateText.text("未通过");
                }
                setColorByState(stateCell, course.state);
                stateCell.append(stateText);
                row.append(stateCell);

                table.append(row);
            });
        }

        function updatePagination(totalPages, page) {
            $('#pageInfo').text(`第 ${page} 页 / 共 ${totalPages} 页`);
            $('#prevPage').prop('disabled', page === 1);
            $('#nextPage').prop('disabled', page === totalPages);
            $('#firstPage').prop('disabled', page === 1);
            $('#lastPage').prop('disabled', page === totalPages);
        }

        function setColorByState(cell, state) {
            if (state == 0) {
                cell.css('color', 'c');
            } else if (state == 1) {
                cell.css('color', 'green');
            } else if (state == 2) {
                cell.css('color', 'red');
            }
        }

        $('#firstPage').click(function () {
            fetchCourses(1);
        });

        $('#prevPage').click(function () {
            if (current > 1) {
                current--;
                fetchCourses(current);
            }
        });

        $('#nextPage').click(function () {
            fetchCourses(current + 1);
        });

        $('#lastPage').click(function () {
            fetchCourses(totalPages);
        });

        // 初始化加载第一页数据
        fetchCourses(current);
    });
</script>
</body>
</html>